<template>
<!--  边坡档案页面-->
  <div class="box-view">
    <el-row :gutter="15">
      <el-col :span="4" class="left_org">
        <!-- 搜索框 -->
        <organization-tree
          v-model="deptTree"
          ref="deptTree"
          :changeOnSelect="true"
          placeholder="选择管养单位"
          @change="selectOrgHandel"
        ></organization-tree>
      </el-col>
      <el-col :span="20">
        <div class="page">
          <div style="padding: 20px 0px 0px 20px">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item
                @click.native="breadClick(item.deptTreeIdList)"
                v-for="item in deptTree.breadList"
                :key="item.name"
              >
                <el-button type="text" class="bread_button_text">{{
                  item.deptName
                  }}
                </el-button>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-divider></el-divider>
          <!-- 数据统计-->
          <el-row>
            <el-col :span="8">
              <!--路线统计-->
              <el-card class="card_echarts" shadow="hover">
                <echarts-nesting-change ref="echartsOneChange"></echarts-nesting-change>
              </el-card>
            </el-col>
            <el-col :span="8">
              <!--区间统计-->
              <el-card class="card_echarts" shadow="hover">
                <echarts-strip-change ref="echartsTwoChange"></echarts-strip-change>
              </el-card>
            </el-col>
            <el-col :span="8">
              <!--区间统计-->
              <el-card class="card_echarts" shadow="hover">
                <echarts-nesting-change ref="echartsThreeChange"></echarts-nesting-change>
              </el-card>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <!-- 条件筛选 -->
          <div class="page_filter">
            <el-input v-model="form.slopeNo" clearable placeholder="">
              <template slot="prepend">边坡编号</template>
            </el-input>
            <el-autocomplete
              v-model="state"
              clearable
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入路线名称或编号"
              @change="handleChange"
              @select="handleSelect"
            ></el-autocomplete>
<!--            <el-select-->
<!--              v-model="form.roadId"-->
<!--              filterable-->
<!--              clearable-->
<!--              placeholder="选择路线"-->
<!--              @change="changeRoad"-->
<!--            >-->
<!--              <el-option-->
<!--                v-for="item in deptRoadList"-->
<!--                :key="item.id"-->
<!--                :label="item.name"-->
<!--                :value="item.id"-->
<!--              >-->
<!--              </el-option>-->
<!--            </el-select>-->
            <el-select
              v-model="form.slopeType"
              clearable
              placeholder="边坡类型"
            >
              <el-option
                v-for="item in EnumSlopeTypeList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
            <el-button
              class="common_btn-defalut"
              icon="el-icon-search"
              @click="
                form.page = 1;
                queryList();
              "
            >搜索
            </el-button
            >
          </div>

          <div class="page_main">
            <el-button
              icon="el-icon-plus"
              @click.stop="handleAdd"
              class="common_btn-small"
            >新增边坡基础档案
            </el-button>
            <!--      <el-button icon="el-icon-plus" @click.stop="handleAddFile" class="common_btn-small">边坡基础档案导入</el-button>-->

            <!-- table -->
            <el-table :data="tableList" border>
              <el-table-column label="序号" fixed width="80">
                <template slot-scope="scope">
                  {{ getIndex(scope.$index) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="slopeNo"
                width="180"
                label="边坡编号"
              ></el-table-column>
              <el-table-column
                prop="name"
                min-width="220"
                show-overflow-tooltip
                label="边坡名称"
              ></el-table-column>
              <el-table-column
                prop="slopeTypeName"
                width="120"
                label="边坡类型"
              ></el-table-column>
              <el-table-column
                prop="roadName"
                width="180"
                label="所属路线"
              ></el-table-column>
              <el-table-column
                prop="deptName"
                min-width="150"
                label="管养单位"
              ></el-table-column>
              <el-table-column label="起止桩号" width="220">
                <template slot-scope="scope">
                  K{{ scope.row.startPointBig }}+{{
                  scope.row.startPointSmall
                  }}~K{{ scope.row.endPointBig }}+{{ scope.row.endPointSmall }}
                </template>
              </el-table-column>
              <el-table-column
                prop="positionName"
                width="100"
                label="边坡位置"
              ></el-table-column>
              <el-table-column prop="slopeLength" width="100" label="边坡长度">
                <template slot-scope="scope">
                  {{ scope.row.slopeLength }}m
                </template>
              </el-table-column>
              <el-table-column prop="updateTime" width="180" label="更新时间">
                <template slot-scope="scope">{{
                  scope.row.updateTime | formatTimer2
                  }}
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="220">
                <template slot-scope="scope">
                  <button class="btn_edit" @click="handleEdit(scope.row)">
                    编辑
                  </button>
                  <button class="btn_edit" @click="checkDetails(scope.row)">
                    查看详情
                  </button>
                  <!--            <button class="btn_edit" @click="downSlopeInfo(scope.row)">下载档案</button>-->
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="form.page"
              :page-size="form.pageSize"
                 :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next,jumper"
              :total="form.total"
            >
            </el-pagination>
          </div>
          <!-- 编辑新增弹窗 -->
          <el-dialog
            :title="dialogTitle"
            :visible.sync="isShowAddDialog"
            :close-on-click-modal="false"
            width="1080px"
          >
            <div class="tabs_view">
              <el-steps
                :active="stepActive"
                space="200"
                simple
                finish-status="success"
              >
                <el-step title="基本情况"></el-step>
                <el-step title="边坡类型"></el-step>
                <el-step title="工程地质信息"></el-step>
                <el-step title="防护工程信息"></el-step>
                <el-step title="边坡照片"></el-step>
              </el-steps>
            </div>
            <div class="dialogAdd">
              <div v-show="stepActive === 0" class="box_wrap">
                <form-base v-model="currentRow" ref="formBase"></form-base>
              </div>
              <div v-show="stepActive === 1" class="box_wrap">
                <form-type v-model="currentRow" ref="formSurvey"></form-type>
              </div>
              <div v-show="stepActive === 2" class="box_wrap">
                <form-di-zhi v-model="currentRow" ref="formDizhi"></form-di-zhi>
              </div>
              <div v-show="stepActive === 3" class="box_wrap">
                <form-fang-hu
                  v-model="currentRow"
                  ref="formFangHu"
                ></form-fang-hu>
              </div>
              <div v-show="stepActive === 4" class="box_wrap">
                <form-img v-model="currentRow" ref="formImg"></form-img>
              </div>
            </div>
            <div class="button-foot" v-show="stepActive === 0">
              <el-button
                size="medium"
                type="primary"
                @click="validatorForm('formBase')"
              >下一步
              </el-button
              >
            </div>
            <div class="button-foot" v-show="stepActive === 1">
              <el-button
                size="medium"
                type="primary"
                plain
                @click="stepActive--"
              >上一步
              </el-button
              >
              <el-button
                size="medium"
                type="primary"
                @click="validatorForm('formSurvey')"
              >下一步
              </el-button
              >
            </div>
            <div class="button-foot" v-show="stepActive === 2">
              <el-button
                size="medium"
                type="primary"
                plain
                @click="stepActive--"
              >上一步
              </el-button
              >
              <el-button
                size="medium"
                type="primary"
                @click="validatorForm('formDizhi')"
              >下一步
              </el-button
              >
            </div>
            <div class="button-foot" v-show="stepActive === 3">
              <el-button
                size="medium"
                type="primary"
                plain
                @click="stepActive--"
              >上一步
              </el-button
              >
              <el-button
                size="medium"
                type="primary"
                @click="validatorForm('formFangHu')"
              >下一步
              </el-button
              >
            </div>
            <div class="button-foot" v-show="stepActive === 4">
              <el-button
                size="medium"
                type="primary"
                plain
                @click="stepActive--"
              >上一步
              </el-button
              >
              <el-button
                class="common_btn-defalut"
                type="primary"
                @click="validateForm"
              >提交档案
              </el-button
              >
            </div>
          </el-dialog>
          <!-- 查看弹窗 -->
          <el-dialog
            :title="dialogTitle"
            :visible.sync="isShowDialog"
            @open="init"
            :close-on-click-modal="false"
            width="1080px"
          >
            <div
              v-if="currentRow.name"
              style="
                font-size: 25px;
                font-weight: 600;
                text-align: center;
                color: #1990FE;
                margin-bottom: 10px;
              "
            >
              {{ currentRow.name }}
            </div>
            <div class="dialogAdd">
              <el-tabs
                v-model="activeName"
                type="border-card"
                class="dialogCard"
              >
                <el-tab-pane label="基本情况" name="base">
                  <form-base
                    v-model="currentRow"
                    ref="formBase"
                    :roadList2="roadList"
                    :isEdit="isEdit"
                  ></form-base>
                </el-tab-pane>
                <el-tab-pane label="边坡类型" name="type">
                  <form-type
                    v-model="currentRow"
                    ref="formType"
                    :isLook="!isEdit"
                  ></form-type>
                </el-tab-pane>
                <el-tab-pane label="工程地质信息" name="survey">
                  <form-di-zhi
                    v-model="currentRow"
                    ref="formDizhi"
                    :isLook="!isEdit"
                  ></form-di-zhi>
                </el-tab-pane>
                <el-tab-pane label="防护工程信息" name="risk">
                  <form-fang-hu
                    v-model="currentRow"
                    ref="formFangHu"
                    :isLook="!isEdit"
                  ></form-fang-hu>
                </el-tab-pane>
                <el-tab-pane label="边坡照片" name="pic">
                  <el-row :gutter="10" v-if="!isEdit">
                    <el-col
                      :span="5"
                      v-for="(o, index) in currentRow.picList"
                      :key="index"
                    >
                      <el-card :body-style="{ padding: '0px' }">
                        <el-image
                          @click="_previewImg(index, currentRow.picList)"
                          style="height: 200px"
                          fit="scale-down"
                          :src="constUrl + o.url"
                        ></el-image>
                        <div style="padding: 14px">
                          <span>{{ o.name }}</span>
                          <div class="bottom clearfix">
                            <time class="time">{{ o.time | formatTimer }}</time>
                          </div>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                  <form-img
                    v-else
                    v-model="currentRow"
                    ref="formImg"
                  ></form-img>
                </el-tab-pane>
              </el-tabs>

              <!-- 操作按钮 -->

              <picture-viewer ref="imageViewer"></picture-viewer>
            </div>
            <span slot="footer" class="dialog-footer" v-if="isEdit">
              <el-button class="common_btn-white" @click="isShowDialog = false"
              >取消</el-button
              >
              <el-button
                class="common_btn-defalut"
                type="primary"
                @click="validateForm"
              >确定</el-button
              >
            </span>
          </el-dialog>
          <!--上传文件-->
          <el-dialog
            title="边坡基础档案导入"
            :visible.sync="isShowDialogFile"
            :close-on-click-modal="false"
            width="520px"
          >
            <el-form
              ref="newUploadForm"
              :model="newUploadForm"
              label-width="80px"
              label-position="right"
            >
              <el-row>
                <el-col :span="18">
                  <el-form-item label="上传文件" prop="fileName">
                    <el-input
                      v-model="fileName"
                      :readonly="true"
                      placeholder="文件名"
                      style="width: 250px"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-upload
                    class="upload-demo"
                    ref="upload"
                    action="doUpload"
                    :limit="1"
                    :file-list="fileList"
                    :before-upload="beforeUpload"
                  >
                    <el-button slot="trigger" type="primary" plain
                    >选取文件
                    </el-button
                    >
                    <!-- <div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过100MB</div>
                          <div slot="tip" class="el-upload-list__item-name">{{fileName}}</div> -->
                  </el-upload>
                </el-col>
              </el-row>
              <el-row>
                <el-button
                  icon="el-icon-download"
                  @click.stop="handleOutFile"
                  size="mini"
                  type="primary"
                >导入模板下载
                </el-button>
              </el-row>
            </el-form>
            <!-- 操作按钮 -->
            <span slot="footer" class="dialog-footer">
              <el-button class="common_btn-white" @click="cancleSub()"
              >取消</el-button
              >
              <el-button
                class="common_btn-defalut"
                type="primary"
                @click="validateFormFile"
              >确定</el-button
              >
            </span>
          </el-dialog>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import OrganizationTree from "@/components/organization-tree/all";
import {
  getSlopeList,
  slopeAdd,
  slopeAddMore,
  slopeUpdate,
} from "@/services/model/road-mgmt";
import PictureViewer from "@/components/picture-viewer/index-name";
import constUrl from "@/services/env";
import FormBase from "./old-modules/form-base";
import FormDiZhi from "./old-modules/form-dizhi";
import FormImg from "./old-modules/form-img";
import FormFangHu from "./old-modules/form-fanghu";
import FormType from "./old-modules/form-type";
import ItemMixins from "./old-modules/item.mixins";
import EchartsNestingChange from "./echarts/nesting";
import EchartsStripChange from "./echarts/strip";
import {
  getSlopeCount
} from '@/services/model/statistics'
import Enums from '@/utils/enums'

export default {
  components: {

    FormBase,
    FormType,
    FormDiZhi,
    FormFangHu,
    FormImg,
    PictureViewer,
    OrganizationTree,
    EchartsNestingChange,
    EchartsStripChange
  },
  mixins: [ItemMixins,Enums],
  data() {
    return {
      restaurants:[],
      state: '',
      timeout:  null,
      chartsName: ['echartsOneChange', 'echartsTwoChange', 'echartsThreeChange'],
      deptTree: {
        breadList: [], //面包屑
        deptTreeId: "",
      },
      isShowDialogFile: false,
      fileName: "",
      newUploadForm: {
        fileName: "",
      },
      activeName: "base",
      search: {
        regionList: [],
      },
      slopeTypeList: [],
      EnumSlopeTypeList: [],
      tableList: [],
      isShowDialog: false,
      isShowAddDialog: false,
      isEdit: false,
      constUrl,
      form: {
        page: 1,
        pageSize: 10,
        roadId: "",
        slopeType: "",
        flag: 0,
      },
      deptRoadList: [],
      currentRow: {},
      baseCurrentRow: {
        slopeNo: "",
        slopeItem: {},
        slopeType: 1,
        kangZhenLevel: 1,
        fangHongBiaoZhun: 1,
        weiHaiDuiXiangList: [],
        slopeProtectList: [],
        picList: [],
        riverProtectList: [],
        waterDrainStuffList: [],
        waterDrainShapeList: [],
        diBiaoShuiTiList: [],
        roadSectionId: "",
        mainRiskLevel: "",
        protectionDetailList: [],
        protectionTypeList: [],
        structureList: [],
        waterDrainStepList: [],
        groundwaterDrainStepList: [],
        easyMonitorPlanList: [],
        specialMonitorPlanList: [],
        dig: {
          //边坡开挖
          before: 0, //施工前EnumRiskLevel
          doing: 0, //施工中EnumRiskLevel
        },
        anchored: {
          //预应力锚固
          before: 0, //施工前EnumRiskLevel
          doing: 0, //施工中EnumRiskLevel
        },
        hole: {
          //人工挖孔桩
          before: 0, //施工前EnumRiskLevel
          doing: 0, //施工中EnumRiskLevel
        },
        wall: {
          //抗滑挡墙
          before: 0, //施工前EnumRiskLevel
          doing: 0, //施工中EnumRiskLevel
        },
        drain: {
          //排水隧洞
          before: 0, //施工前EnumRiskLevel
          doing: 0, //施工中EnumRiskLevel
        },
        slip: {
          //边坡注浆
          before: 0, //施工前EnumRiskLevel
          doing: 0, //施工中EnumRiskLevel
        },
      },
      stepActive: 0,
      rules: {
        userName: {required: true, message: "请输入负责人姓名"},
        address: {required: true, message: "请输入详细地址"},
        platformName: {required: true, message: "请输入单位名称"},
        platformType: {
          required: true,
          message: "请选择平台类型",
          trigger: "change",
        },
        phone: {required: true, validator: "请输入联系电话"},
      },
    };
  },
  computed: {
    // 弹窗的title
    dialogTitle() {
      return this.currentRow.id ? "编辑边坡档案" : "新增边坡档案";
    },
    isEditStatus() {
      return !!this.currentRow.id;
    },
  },
  methods: {
    async getSlopeCount() {
      let res = await getSlopeCount(this.form);
      let data = res.data
      this.$refs['echartsOneChange'].updateEchart('边坡类型', data.slopeCount, data.slopeType, '边坡总数', '边坡总数')
      if (data.slopeCount[0].value > 0) {
        this.$refs['echartsTwoChange'].updateEchart('路线边坡高度Top10', data.slopeTopTen);
        this.$refs['echartsThreeChange'].updateEchart('路线边坡数', data.slopeCount, data.slopeRoadCount, '边坡总数', '边坡总数')
      } else {
        this.$refs['echartsTwoChange'].updateEchart('', [])
        this.$refs['echartsThreeChange'].updateEchart('', null, null, '', '')
      }
    },
    //面包屑跳转
    breadClick(deptTreeId) {
      this.$refs.deptTree.changeBread(deptTreeId);
    },
    //组织机构组件回调
    selectOrgHandel() {
      this.$forceUpdate();
      this.form.deptTreeId = this.deptTree.deptTreeId;
      this.queryList();
      this.changeDept();
    },
    // 模糊搜索路线
    querySearchAsync(queryString, cb) {
      var restaurants
      if(!queryString){
        restaurants = [];
      }else {
        restaurants = this.restaurants;

      }
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 10 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) >-1);
      };
    },
    handleSelect(item) {
      this.form.roadId=item.id
      this.changeRoad()
    },
    handleChange(item){
      if(item==''){
        this.form.roadId=''
      }
    },
    //获取路线列表
    async changeDept() {
      this.deptRoadList = await this.getRoadListByDept(this.form.deptTreeId);
      let data=[]
      this.deptRoadList.map(x=>{
        data.push({
          id:x.id,
          value:x.name,
          name:x.name
        })
      })
      this.restaurants=data
    },
    init() {
      this.$nextTick(() => {
        this.$refs.formBase.changeDept();
        this.$refs.formBase.getRoadSectionInfo2();
      });
    },
    // 查看大图
    _previewImg(index, urls) {
      const urlList = JSON.parse(JSON.stringify(urls));
      urlList.map((x) => {
        x.url = this.constUrl + x.url;
        return x;
      });
      // 显示照片查看器
      this.$refs.imageViewer.showViewer(urlList, index);
    },
    handleOutFile() {
      // 文件导出
      const {href} = this.$router.resolve({
        path: "/statics/slopeInfoTemplate.xls",
      });
      window.open(href);
    },
    beforeUpload(file) {
      // 上传前 文件校验
      this.files = file;
      const extension = file.name.split(".")[1] === "xls";
      const extension2 = file.name.split(".")[1] === "xlsx";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!extension && !extension2) {
        this.$message.warning("上传文件只能是 xls、xlsx格式!");
        return;
      }
      if (!isLt2M) {
        this.$message.warning("上传文件大小不能超过 2MB!");
        return;
      }
      this.fileName = file.name;
      return false; // 返回false不会自动上传
    },
    // 确认导入文件
    validateFormFile() {
      this.$refs.newUploadForm.validate((valid) => {
        // 是否通过 表单验证
        if (valid) {
          if (this.fileName === "") {
            this.$message({
              message: "请选择要上传的文件！",
              type: "warning",
              showClose: true,
            });
            return false;
          }
          let fileFormData = new FormData();
          fileFormData.append("uploadFile", this.files, this.fileName); // 上传的文件
          slopeAddMore(fileFormData).then((res) => {
            // 上传请求
            if (res.code === 200) {
              this.fileName = "";
              this.isShowDialogFile = false;
              this.$notify({
                type: "success",
                title: "提示",
                message: "添加成功",
              });
              this.queryList();
            }
          });
        } else {
          this.$message({
            type: "warning",
            message: "新增条件有误！",
            showClose: true,
          });
        }
      });
    },
    // 新增数据
    handleAddFile() {
      this.isShowDialogFile = true;
    },
    checkDetails(row) {
      this.currentRow = row;
      this.initCheckItem();
      this.activeName = "base";
      this.isEdit = false;
      this.isShowDialog = true;
    },
    async initCheckItem() {
      if (!this.currentRow.weiHaiDuiXiangList) {
        this.currentRow.weiHaiDuiXiangList = [];
      }
      if (!this.currentRow.slopeProtectList) {
        this.currentRow.slopeProtectList = [];
      }
      if (!this.currentRow.diBiaoShuiTiList) {
        this.currentRow.diBiaoShuiTiList = [];
      }
      if (!this.currentRow.riverProtectList) {
        this.currentRow.riverProtectList = [];
      }
      if (!this.currentRow.protectionTypeList) {
        this.currentRow.protectionTypeList = [];
      }
      if (!this.currentRow.waterDrainStepList) {
        this.currentRow.waterDrainStepList = [];
      }
      if (!this.currentRow.waterDrainStuffList) {
        this.currentRow.waterDrainStuffList = [];
      }
      if (!this.currentRow.waterDrainShapeList) {
        this.currentRow.waterDrainShapeList = [];
      }
      if (!this.currentRow.groundwaterDrainStepList) {
        this.currentRow.groundwaterDrainStepList = [];
      }
    },
    /**
     * row  当前操作行的对象
     */
    handleEdit(row) {
      this.currentRow = row;
      this.initCheckItem();
      this.activeName = "base";
      this.isEdit = true;
      this.isShowDialog = true;
    },
    // 获取当前的序号
    getIndex(index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1;
      return param;
    },
    // 新增数据
    handleAdd() {
      this.currentRow = this.baseCurrentRow
      this.activeName = "base";
      this.roadSectionInfo = {};
      this.isShowAddDialog = true;
      this.isEdit = false;
      this.$nextTick(() => {
        this.$refs.formBase.clearValidate();
      });
      // 修改内容
      this.stepActive = 0;
    },
    async queryList() {
      // 由于在前端进行过滤，所以name不能传到后端
      let res = await getSlopeList(this.form);
      this.tableList = res.data?.records || [];
      this.form.page = Number(res.data?.current);
      this.form.total = Number(res.data?.total);
      this.getSlopeCount()
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.queryList();
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val;
      this.queryList();
    },

    // 表单提交
    validateForm() {
      this.submitData();
    },
    //选择路线
    changeRoad() {
      this.form.roadSectionId = "";
      this.bidSectionList = [];
      const {roadId} = this.form;
      this.getBidSectionList(roadId);
    },
    // 表单校验
    validatorForm(name) {
      if (this.stepActive === 0) {
        //生成边坡编号和名称
        let name = "K" + this.currentRow.startPointBig;
        if (this.currentRow.startPointSmall) {
          name = name + "+" + this.currentRow.startPointSmall;
        }
        name = name + "~K" + this.currentRow.endPointBig;
        if (this.currentRow.endPointSmall) {
          name = name + "+" + this.currentRow.endPointSmall;
        }
        this.currentRow.name = name + "段高边坡";
      }
      this.$refs[name]._validatorForm().then((res) => {
        this.stepActive++;
      });
    },
    // 新增编辑提交数据
    async submitData() {
      // 根据ID判断使用新增还是编辑
      let action = this.currentRow.id ? slopeUpdate : slopeAdd;
      // }
      let res = await action(this.currentRow);
      if (res.code === 200) {
        this.$notify({
          type: "success",
          title: "提示",
          message: this.currentRow.id ? "修改成功" : "添加成功",
        });
        this.queryList();
        this.isShowAddDialog = false;
        this.isShowDialog = false;
      }
      return res;
    },
  },

  activated() {
  },
  filters: {},
  mounted() {
    this.queryList();
    this.currentRow = this.baseCurrentRow;
    this.queryDictList(['EnumSlopeType'], ['EnumSlopeTypeList']);
  },
};
</script>

<style scoped="scoped" lang="less">
  .box-view {
    .left_org {
      height: calc(100% - 83px);
      border-radius: 8px;
    }

    .page {
      .page_filter {
        padding: 0px 20px;
      }
    }
  }

  .bread_button_text {
    padding-right: 0px;
    font-size: 18px;
    font-weight: 600;
    color: #1990FE;
  }

  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    font-weight: 600;
  }

  .el-tabs--border-card
  > .el-tabs__header
  .el-tabs__item:not(.is-disabled):hover {
    font-weight: 600;
  }

  .el-tabs__item {
    font-size: 20px;
    line-height: 45px;
    height: 45px;
  }

  .tabs_view {
    // background: red;
    // margin-top: 0 !important;
    /deep/ .el-step.is-simple .el-step__title {
      font-size: 15px;
      line-height: 20px;
    }

    .el-steps {
      margin-bottom: 10px;
      // background: red;
      background: transparent;
      // color: red !important;
      margin-right: 10px;
    }
  }

  /deep/ .el-step__title {
    // background: red;
    width: 100%;
    // color: ;
    font-size: 12px !important;
  }

  /deep/ .is-process {
    color: #1990FE;
    font-size: 130% !important;
    font-weight: 600;

    .el-step__icon {
      border: #1990FE 2px solid;
    }
  }

  .button-foot {
    // padding-top: 100px;
    // background: yellow;
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;

    .el-button {
      background: #1990FE;
      border: none;
    }
  }

  .el-dialog {
    .dialogAdd {
      width: 100%;
      // height: 500px;
      // background: red !important;
      overflow: auto;

      .dialogCard {
        background: transparent;
        border: none;
      }

      .el-card {
        // background: transparent !important;
      }

      .box_wrap {

        /deep/ .el-form {
          // background: yellow;
          height: 500px !important;

        }
      }
    }
  }

  // 设置滚动条

  .dialogAdd::-webkit-scrollbar {
    width: 4px;
    /*height: 4px;*/
  }

  .dialogAdd::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
    background: #1990FE;
  }

  .dialogAdd::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(255, 255, 255, 1);
  }

  // 弹窗里面颜色
  .el-tabs--border-card {
    // background: transparent;
    border: 1px solid black;
    box-shadow: -12px -12px 8px black !important;
  }

  // 新增弹窗
  /deep/ .el-steps--simple {
    // background: red ;
  }

  // 修改input框
  /deep/ .el-input__inner {
    // background: red !important;
    border: 1px solid #1990FE;
    border-radius: 0;
  }

  //修改input框上的按钮
  /deep/ .el-input-group__prepend {
    border-radius: 0;
    border: 1px solid #1990FE;
  }

  // 设置btn 样式
  /deep/ .el-button--default {
    background: #1990FE !important;
    border-radius: 0%;
  }

  // 设施查看栏 tab头部
  /deep/ .el-tabs__nav-wrap {
    background: transparent !important;

    .el-tabs__nav-scroll {
      background: transparent;

      .el-tabs__nav {
        // background: red;
        .el-tabs__item {
          background: transparent !important;
        }

        .is-active {
          background: #1990FE !important;
          color: white;
          font-size: 120%;
          font-weight: 600;
        }
      }
    }
  }

  // 设置单选框
  /deep/ .el-checkbox {
    // color: white !important;
  }

  /deep/ .geology-children {
    color: #1990FE !important;
  }

  /deep/ .geology-children-fanghu {
    color: #1990FE !important;

  }
</style>
